<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
    <title>Echarts-demo</title>
    <script src="echarts.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-6">
                <div id="main" style="width: 1000px;height:500px;"></div>
            </div>
        </div>
    </div>


    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        let main = document.querySelector('#main');
        let myChart = echarts.init(main);

        // myChart.showLoading();
        

        // 假设 china.json 是一个包含中国地图数据的 JSON 文件
        fetch('china.json')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                function formatProvinceName(name) {
            return name.replace(/省$/, '').replace(/$市/, '');
        }
                return response.json();

                

            })
            .then(chinaMap => {
                // 注册地图
                echarts.registerMap('China', chinaMap);
                // 隐藏加载提示
                // myChart.hideLoading();
                // 设置选项并更新图表
                myChart.setOption({
                    title: {
                        text: '中国地图~稻谷播种面积(千公顷)'
                        // subtext: '',
                        // sublink: ''
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {

                            var provinceName = params.name;
                            if (provinceName === '青海省') {
                                return '';
                            }
                            
                            // 否则正常显示提示框
                            return provinceName + ' : ' + params.value;

                        }
                    },

                    // toolbox: {
                    //     // show: false,
                    //     // orient: 'vertical',
                    //     // left: 'right',
                    //     // top: 'center',
                    //     feature: {
                    //         // dataView: { readOnly: true },
                    //         // restore: {},
                    //         // saveAsImage: {}
                    //     }
                    // },
                    
                    
                    
                    series: [
                        {
                            name: '稻谷播种面积',
                            type: 'map',
                            mapType: 'China', // 指定地图类型
                            data: [
                                // 这里应该是一个对象数组，每个对象至少包含 name 和 value 属性
                                
                                {"name": "湖南", "value": 3967.67},
                                {"name": "黑龙江", "value": 3601.37},
                                {"name": "江西", "value": 3403.00},
                                {"name": "安徽", "value": 2496.48},
                                {"name": "湖北", "value": 2263.96},
                                {"name": "江苏", "value": 2221.42},
                                {"name": "四川", "value": 1874.00},
                                {"name": "广东", "value": 1835.90},
                                {"name": "广西", "value": 1758.03},
                                {"name": "吉林", "value": 833.18},
                                {"name": "云南", "value": 709.46},
                                {"name": "重庆", "value": 659.19},
                                {"name": "浙江", "value": 629.19},
                                {"name": "贵州", "value": 613.77},
                                {"name": "河南", "value": 601.70},
                                {"name": "福建", "value": 599.45},
                                {"name": "辽宁", "value": 516.39},
                                {"name": "海南", "value": 228.69},
                                {"name": "内蒙古自治区", "value": 117.23},
                                {"name": "山东", "value": 106.43},
                                {"name": "陕西", "value": 106.09},
                                {"name": "上海", "value": 103.70},
                                {"name": "河北", "value": 76.59},
                                {"name": "天津", "value": 55.26},
                                {"name": "新疆维吾尔自治区", "value": 36.71},
                                {"name": "宁夏", "value": 29.37},
                                {"name": "甘肃", "value": 2.49},
                                {"name": "山西", "value": 2.16},
                                {"name": "西藏自治区", "value": 0.83},
                                {"name": "北京", "value": 0.42},
                                {"name": '青海', "value": 0.00},
                                {"name": '台湾', "value": 1145.14},
                                {"name": '香港', "value": 1145.14},
                                {"name": '澳门', "value": 1145.14}
                            ]
                        }
                    ]
                });
            })
            .catch(error => {
                console.error('Error:', error);
            });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
  </body>
</html>